<template>
	<view class="bg-white">
		<view class="store-box">
			<view class="goods-info u-flex " v-for="(gItem, gIndex) in list" :key="gIndex">
				<radio class="u-m-r-28" v-show="isRadio" :color="radioColor" :checked="isCheck(gItem.id,2)" @tap.stop="$emit('checkInvalid',gItem.id)" />
				<view class="status-box c-white u-font-20 text-center u-m-r-12" v-show="!isRadio">失效</view>
				<view class="right-box u-flex align-initial flex-1">
					<u-image  mode="aspectFill" class="u-m-r-20" style="opacity: 0.5;" width="180rpx" height="180rpx" :src="gItem.productSku.skuCoverImg">
						<u-loading-icon slot="loading" />
					</u-image>
					<view class="goods-right u-flex align-initial  u-flex-between flex-col flex-1">
						<view class="goods-tlt  u-m-b-10 ">
							<view class="u-line-2">
								{{ gItem.productSku.productName }}
							</view>
						</view>
						<view class="u-flex" >
							<view class="status-box c-white u-font-20 text-center u-m-r-12" v-show="isRadio">失效</view>
							<view class="c-45">商品已经卖光了</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: Array,
		isRadio:Boolean,
		invalidCheck:Array
	},
	computed:{
		radioColor () {
			return this.$root.AppSkin.primary
		}
	},
	methods:{
		isCheck(val) {
			return this.invalidCheck.includes(val)
		},
	}
}
</script>

<style lang="scss" scoped>
.c-45 {
	color: #454545;
}
.store-tlt {
	padding: 34rpx 0rpx 0rpx 20rpx;
}
.goods-info {
	padding: 30rpx 24rpx 30rpx 20rpx;
}
.status-box {
	width: 60rpx;
	height: 36rpx;
	line-height: 36rpx;
	background: #000000;
	border-radius: 40rpx;
	opacity: 0.29;
}
.right-box {
	.goods-right {
		height: 180rpx;
		.goods-tlt {
			color: #9a9a9a;
			line-height: 40rpx;
			height: 80rpx;
		}
	}
}
</style>
